<template>
  <div class='container'>
      <div class="weui-cell">
          <div class="weui-cell__bd"></div>
          <div class="weui-cell__ft">
             <report :info="info" type="1" model="1"></report>
          </div>
      </div>
      <div class="weui-cell originator">
         <div class="weui-cell__hd">
              <avatar :avatar="info.user.avatar" 
                      :Level="info.user.partner_level" 
                      :userId="info.user.id" 
                      :isAuth="info.user.is_auth" 
                      :isPartner="info.user.is_partner"></avatar>
         </div>
         <div class="weui-cell__bd">
            <div class="nickname">{{info.user.Nickname}}</div>
            <div class="time">{{info.created_at}}</div>
         </div>
         <div class="weui-cell__ft">
            <Follow :info="info" :userId="info.user.id" ></Follow>
         </div>
         <div class="weui-cell__ft">
           <button open-type="getUserInfo" @getuserinfo="bindGetUserInfo" class="qiahb">
             <img :src="img+'/img_red_envelopes_uncollected@2x.png'" alt="" class="qihb" @click="qihb" >
           </button>
           
           <!-- <img src="/static/images/img_red_envelopes_have_received@2x.png" alt="" class="qihb" @click="qihbover" /> -->
         </div>
      </div>
      <div class="content">{{info.desc}}</div>
      <div class="imgs">
         <img :src="item" alt="" v-for="item in info.thumb" :key="item"/>
      </div>
      <div class="weui-cell">
         <operate  iszan="true" iscomt="true" isshare="true" :info="info" islook="true"></operate> 
      </div>
      <div class="line"></div>
      <comment :comment="info" type="2" @click="change" :listCom="list"></comment>
      <div class="mask" v-if="show">
            <img :src="img+'/img_get_red_envelope@2x.png'" alt="" class="envelope"/>
            <img src="/static/images/cha.png" alt="" class="close" @click="close"/>
            <div class="money" v-if="money==0">手慢了哦</div>
            <div class="money" v-else>恭喜获得{{money}}元</div>
      </div> 
  </div>
</template>

<script>
import avatar from "@/components/avatar"
import Follow from "@/components/follow"
import report from "@/components/report"
import comment from "@/components/comment"
import operate from "@/components/operate"

import {baginfo} from "@/api/redbag"
import {bagOpen} from "@/api/redbag"
import {showComment} from "@/api/operate.js"
import { xdLogin } from "@/utils/login"
export default {
  components: {
      avatar,
      Follow,
      report,
      comment,
      operate
  },

  data () {
    return {
       index:"111",
       hongbao:1,
       show:false,
       info:"",
       money:"",
       img: this.$URL.imgurl,
       list:[],
       bagid:"",
       userId:0,
       currentpage:1
    }
  },
  methods:{
     qihbover(){
        wx.showToast({
          title: '今日已领取',
          icon: 'none',
          image: '',
          duration: 1500,
          mask: false,
          success: (result) => {
              
          },
          fail: () => {},
          complete: () => {}
        });
     },
     getComment(){
       let data={};
       data.type=8;
       data.id=this.bagid
       data.user_id=this.userId;
         
      showComment(data).then(res=>{
        console.log(res)
        if(res.code==200){
          this.queS=false
          let last_page=res.data.total_page;
          if(this.currentpage==1){
            this.list=res.data.data
          }else{
            this.list=this.list.concat(res.data.data);
          }
          console.log(this.list)
          if (last_page > this.currentpage){
              this.load=true
          }else{
              this.load=false
          }
        }else{
           this.list=[]
           this.queS=true
        }
          
      },err=>{
          this.queS=true
      }).catch(err=>{
          this.queS=true
      })
    },
     qihb(){
         let data={}
         data.id=this.bagid
         bagOpen(data).then(res=>{
           if(res.code==200){
              console.log(res)
              this.money=res.data
              this.show=true
           }else{
             wx.showToast({
               title:res.msg,
               icon:"none"
             })
           }
            
         }) 
         
     },
     bindGetUserInfo(e){
        wx.getStorage({
            key: 'token',
            success: (result) => {
                this.qihb()
            },
            fail: () => {
                xdLogin(e).then((res)=>{
                    this.qihb()
                })
            },
            complete: () => {}
        });
    },
     close(){
         this.show=false
         this.hongbao=0
     },
     getInfo(){
       let data={};
       data.id=this.bagid;
       baginfo(data).then(res=>{
         if(res.code==200){
            this.info=res.data
         }
       }).then(res=>{
         
       })
     },
     changeValue(item){
       let guan=item.guan;
        item.guan=!guan;
     },
     change(data){
       console.log(data)
        this.info=data.comment
     },
  },
  created () {
    
  },
  onLoad(options){
    console.log(options)
    wx.getStorageSync("user_info")?this.userId=wx.getStorageSync("user_info").id:'';
    this.bagid=options.id;
    this.getInfo()
  },
  onShow(){
    this.getComment()
  }
}
</script>
<style lang="scss">
.qihb{
    width:22px;
    height:31px;
    display: block;
    margin-left: 24px;
}
.qiahb{
  padding:0;
  margin:0;
  background:none;
  &::before{
    border:none;
  }
  &::after{
    border:none;
  }
}
.content{
  font-size:15px;
  font-weight:500;
  color:rgba(51,51,51,1);
  line-height:18px;
  padding: 0 15px;
}
.imgs{
  padding-left: 15px;
  img{
    width:110px;
    height:110px;
    margin-right: 7px;
    margin-top: 7px;
  }
}
.mask{
   position: fixed;
   top:0;
   left:0;
   right: 0;
   bottom: 0;
   background: rgba(0,0,0,0.5);
  .envelope{
    width: 274px;
    height:224px;
    position: absolute;
    top: 158px;
    left: 0;
    right: 0;
    margin: auto;
  }
  .close{
    top:145px;
    left: 260px;
    position: absolute;
    width: 25px;
    height: 25px;
  }
  .money{
    position:absolute;
    top:290px;
    left:0;
    right:0;
    text-align:center;
    font-size:16px;
    font-weight:500;
    color:rgba(250,223,154,1);
  }
}

</style>
